<template>
    <div class="mainSty">
        <div class="vipItem vipOne">
            <div style="height: 138px;"></div>
            <div v-html="One.contentBody"></div>
            <div style="height:30px;"></div>
            <div class="flex_btn footerSty" @click="kaiTongVip(One.id)">
                <div style="margin-top: -8px;font-size: 18px;">{{ One.price }}/{{ One.timeLimit }} {{ One.timeUnitName }}<span
                        style="font-size: 10px;margin-left: 10px;">限购一次</span></div>
                <div style="font-weight:700;margin-right:  10px;"></div>
            </div>
        </div>
        <div class="vipItem viptwo">
            <div style="height: 138px;"></div>
            <div v-html="two.contentBody"></div>
            <div style="height:30px;"></div>
            <div class="flex_btn footerSty" @click="kaiTongVip(two.id)">
                <div style="margin-top: -8px;font-size: 18px;">{{ two.price }}/{{ two.timeLimit }}{{ two.timeUnitName }}</div>
                <div style="font-weight:700;margin-right:  10px;"></div>
            </div> 
        </div>
        <div class="vipItem vipthree">
            <div style="height: 138px;"></div>
            <div v-html="three.contentBody"></div>
            <div style="height:30px;"></div>
            <div class="flex_btn footerSty"  @click="kaiTongVip(three.id)">
                <div style="margin-top: -8px;font-size: 18px;">{{ three.price }}/{{ three.timeLimit }}{{ three.timeUnitName }}</div>
                <div style="font-weight:700;margin-right:  10px;"></div>
            </div>
        </div>
    </div>
    <div class="bg" v-if="codeShow">
        <div class="qrcodeSty flex_cen">
            <qrcode-vue :value="url" :size="qcsize" level="H" />
            <div style="margin-top: 10px;color: #ccc;">请用手机扫码进行支付</div>
            <div class="codeFooterSty">
                <div class="footerBtn" @click="codeShow = false">取消</div>
                <div class="addSty" @click="codeShow = false">已支付</div>
            </div>
        </div>
    </div>

</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { getQueryListApi, openMemberApi } from '@/api/index/index'
import { ElMessage } from 'element-plus';
import QrcodeVue from 'qrcode.vue'
const One = ref<any>({})
const two = ref<any>({})
const three = ref<any>({})
const qcsize = 120
const codeShow = ref(false)
const url = ref('https://www.baidu.com/')
const getQueryList = () => {
    getQueryListApi().then((res: any) => {

        console.log('套餐:', res)
        One.value = res.data[0]
        two.value = res.data[1]
        three.value = res.data[2]
    })
}
const kaiTongVip = (id: any) => {
    let params = {
        id: id
    }
    openMemberApi(params).then((res: any) => {
        url.value = res.data.code_url
        codeShow.value = true
    })
}
getQueryList()
</script>
<style scoped>
.vipOne{
    background-image: url("@/assets/img/vipone.png");
    background-size: 100% 100%;
}
.viptwo{
    background-image: url("@/assets/img/viptwo.png");
    background-size: 100% 100%;
}
.vipthree{
    background-image: url("@/assets/img/vipthree.png");
    background-size: 100% 100%;
}
.bg {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0, 0, 0, .3);
    z-index: 90;
}

.addSty {
    width: 120px;
    height: 36px;
    line-height: 36px;
    border-radius: 4px;
    text-align: center;
    background: #06B2FA;
    color: #fff;
}

.footerBtn {
    width: 120px;
    height: 36px;
    line-height: 36px;
    border-radius: 4px;
    text-align: center;
    background-color: rgb(223, 220, 220);
}

.qrcodeSty {
    position: fixed;
    top: 20%;
    left: 40%;
    width: 22%;
    height: 360px;
    background-color: #fff;
    flex-direction: column;
    opacity: 1;
    z-index: 99;
}

.codeFooterSty {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 40px;
    width: 100%;
}



.footerSty {
    position: absolute;
    bottom: -90px;
    width: 90%;
    margin-left:calc(5% - 10px);
    height: 50px;
    padding: 0 10px;
    background-image: url("@/assets/img/vipbtn.png");
    background-size: 100% 100%;
}

.mainSty {
    width: 60%;
    min-height: 90vh;
    margin-top: 3vh;
    margin-left: 20%;
    background-color: #fff;
    padding: 50px 30px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    background-image: url("@/assets/img/vipbg.png");
    background-size: 100% 100%;
    padding-top: 90px;
}

.vipItem {
    position: relative;
    width: 30%;
    min-height: 560px;
    margin-right: 5%;
    margin-bottom: 12px;
    padding: 0 10px;
}

.vipItem:nth-child(3n) {
    margin: 0;
}
</style>